<template>
  <div
    v-if="visible"
    ref="doc"
    class="draggable-doc"
    :style="{
      top: position.top + 'px',
      left: position.left + 'px',
      width: size.width + 'vw',  // 这里保持单位为 vw
      height: size.height + 'vh',  // 高度保持为 vh
    }"
  >
    <!-- Header 作为不参与滚动的固定区域 -->
    <div class="header" @mousedown="startDragging">
      <span class="title">可拖动的文档</span>
      <button class="close-btn" @click="closeDoc">X</button>
    </div>

    <!-- 滚动内容区域 -->
    <div class="scrollable-content">
      <q-card class="right-card" style="width: 100%; height: 100%;">
        <q-card-section>
          <div class="row q-col-gutter-sm">
            <div class="col-6">
              <q-card
                bordered
                class="container-card"
                @dragover.prevent
                @drop="onDrop('time')"
              >
                <q-card-section>
                  <div class="header-left">时间</div>
                  <q-list class="container-grid">
                    <q-item
                      v-for="(item, index) in containers.time.items"
                      :key="index"
                      class="dropped-item"
                      draggable="true"
                      @dragstart="onDragStart(item, index, 'time')"
                    >
                      <q-item-section>{{ item }}</q-item-section>
                    </q-item>
                  </q-list>
                </q-card-section>
              </q-card>
            </div>
            <div class="col-6">
            <q-card
              bordered
              class="container-card"
              @dragover.prevent
              @drop="onDrop('measurement')"
            >
              <q-card-section>
                <div class="header-left">测量</div>
                <q-list class="container-grid">
                  <q-item
                    v-for="(item, index) in containers.measurement.items"
                    :key="index"
                    class="dropped-item"
                    draggable="true"
                    @dragstart="onDragStart(item, index, 'measurement')"
                  >
                    <q-item-section>{{ item }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>

          <div class="col-6">
            <q-card
              bordered
              class="container-card"
              @dragover.prevent
              @drop="onDrop('model')"
            >
              <q-card-section>
                <div class="header-left">模型</div>
                <q-list class="container-grid">
                  <q-item
                    v-for="(item, index) in containers.model.items"
                    :key="index"
                    class="dropped-item"
                    draggable="true"
                    @dragstart="onDragStart(item, index, 'model')"
                  >
                    <q-item-section>{{ item }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>

          <div class="col-6">
            <q-card
              bordered
              class="container-card"
              @dragover.prevent
              @drop="onDrop('output')"
            >
              <q-card-section>
                <div class="header-left">输出</div>
                <q-list class="container-grid">
                  <q-item
                    v-for="(item, index) in containers.output.items"
                    :key="index"
                    class="dropped-item"
                    draggable="true"
                    @dragstart="onDragStart(item, index, 'output')"
                  >
                    <q-item-section>{{ item }}</q-item-section>
                  </q-item>
                </q-list>
              </q-card-section>
            </q-card>
          </div>
          </div>
        </q-card-section>

        <q-card-section>
          <div class="row justify-center">
            <q-btn
              label="提交"
              color="primary"
              @click="handleSubmit"
              class="q-mr-md"
            />
            <q-btn label="取消" color="secondary" @click="handleCancel" />
          </div>
        </q-card-section>

        <q-card-section>
          <div class="error-log">
            <div class="error-message">
              报错信息 1：某项数据为空。
              <br />
              报错信息 2：未选择输出参数。
              <br />
              报错信息 3：时间参数设置错误。
            </div>
          </div>
        </q-card-section>
      </q-card>
    </div>

    <!-- 右下角用于缩放的拖动手柄 -->
    <div class="resize-handle" @mousedown="startResizing"></div>
  </div>
</template>

<script setup>
// 保留你现有的 JavaScript 部分，无需修改
</script>

<style scoped>
.draggable-doc {
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  user-select: none;
  resize: both; /* 允许拖动缩放 */
  overflow: hidden; /* 外层隐藏滚动，内层滚动 */
}

/* 固定 header，使其不参与滚动 */
.header {
  background-color: #007bff;
  color: white;
  padding: 10px;
  cursor: grab;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky; /* 让 header 固定在顶部 */
  top: 0;
  z-index: 10;
}

.header:active {
  cursor: grabbing;
}

.close-btn {
  background-color: transparent;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.close-btn:hover {
  color: #ff3333;
}

/* 可滚动的内容区域 */
.scrollable-content {
  height: calc(100% - 50px); /* 减去 header 的高度 */
  overflow-y: auto; /* 垂直方向滚动 */
  scroll-behavior: smooth; /* 平滑滚动 */
  scroll-padding: 20px; /* 增加滚动的距离 */
}

/* 内部 q-card 的样式调整 */
.right-card {
  width: 100%;
  height: 100%;
}

/* 调整容器卡片样式 */
.container-card {
  width: 100%;
  max-height: 24vh;
  overflow-y: auto; /* 容器内的滚动 */
}

.error-log {
  height: 16vh;
  border: 1px solid #e0e0e0;
  padding: 10px;
  overflow-y: auto;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.error-message {
  font-size: 14px;
  color: #ff5252;
}

/* 滚动条右下角的缩放拖动手柄 */
.resize-handle {
  position: absolute;
  width: 15px;
  height: 15px;
  bottom: 0;
  right: 0;
  background-color: #007bff;
  cursor: se-resize;
}
</style>
